今日目標

了解 React component 的優點

雖然不多，但每天都有一點點收獲也很棒~~

了解 React Component 的優點

昨天學習了 React 的宣告式、Virtual DOM 這兩大特點，今天來學習 React 的組成單元，Component。

Component：

• React 的基礎磚塊，代表了 UI 的一部分。簡單來說，每個 React component 就像一個獨立的功能模組，專注於做一件事情。

優點：

• 重用性（Reusability）：一旦建立了一個 component，可以在不同的地方多次使用它，不必重新撰寫相同的代碼。比如寫好一個按鈕 component，無論在哪裡需要該按鈕，都可以使用它。

• 單向資料流（One-Way Data Binding）：React 採用單向資料流，意思是在 component 結構中，資料僅從父 component 流向子 component。這使得資料流動變得可預測和容易理解。

• 狀態管理（State Management）：components 擁有自己的 state。當 state 改變時，只有相關的 component 會被重新渲染，提高了性能。

  • 當 state 或 props 改變時，React 會利用 Virtual DOM 進行「reconciliation」來比對差異，並決定如何最有效地更新實際的 DOM。

舉例：

我們 Todo 中新增任務的方式：
原生 JS：將 todos 作為參數

<!-- HTML -->
<div id="app">
  <ul id="todoList"></ul>
  <input type="text" id="todoInput" placeholder="Add a task" />
  <button id="addButton">Add</button>
</div>

<!-- JavaScript -->
<script>
  let todos = [];

  function renderTodoList(todos) {
    const ul = document.getElementById("todoList");
    ul.innerHTML = '';
    todos.forEach((todo, index) => {
      const li = document.createElement("li");
      li.textContent = todo;
      ul.appendChild(li);
    });
  }

  function addTodo() {
    const input = document.getElementById("todoInput");
    todos.push(input.value);
    input.value = '';
    renderTodoList(todos);
  }

  document.getElementById("addButton").addEventListener("click", addTodo);
</script>

React：將 todos 作為 prop

import React, { useState } from 'react';

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => <li key={index}>{todo}</li>)}
    </ul>
  );
}

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const handleAdd = () => {
    setTodos(prevTodos => [...prevTodos, input]);
    setInput('');
  }

  return (
    <div>
      <TodoList todos={todos} />
      <input 
        value={input} 
        onChange={e => setInput(e.target.value)} 
        placeholder="Add a task" 
      />
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

在原生 JS 中，我們需要手動管理 DOM 更新和事件監聽。
在 React 中，這些都被框架自動處理，我們可以專注於數據和 UI 的宣告式描述，而不是手動操作 DOM 和事件。
並且 React component 更容易重用，只要在需要的地方引入並放入 <TodoList /> 即可！

回顧

今天學習了 React component 的內容，如果把 React 的成品比喻成一架鋼彈，那每個 component 就是所有每一個小零件，這架鋼彈就是依靠這些小零件一個一個組裝而成的！

參考資料

[week 21] 初探 React：Component、JSX 語法、props 與 state 的不同 - HackMD
React 元件 | Props Components and Props - React 教學 Tutorial